<template>
  <div class="menu">
    <div class="top">
      <Bg>
        <van-search
          v-model="keyword"
          placeholder="请输入搜索关键词"
          @search="onsearch"
        />
        <div class="back" @click="back">取消</div>
      </Bg>
    </div>
    <div class="content">
      <div class="left" v-show="isShow">
        <van-sidebar v-model="activeKey" @change="changeTag">
          <van-sidebar-item title="推荐" />
          <van-sidebar-item
            v-for="t in productType"
            :key="t.id"
            :title="t.typeDesc"
          />
        </van-sidebar>
      </div>
      <div class="right">
        <div class="product">
          <div
            class="infoBox"
            v-for="item in productdata"
            :key="item.id"
            @click="goDetails(item.pid)"
          >
            <div class="imgbox">
              <img :src="item.smallImg" class="auto-img" />
            </div>
            <div class="info">
              <div class="name">{{ item.name }}</div>
              <div class="enner">{{ item.enname }}</div>
            </div>
            <div class="price">￥{{ item.price }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "../assets/less/menu.less";
import Bg from "../components/Bg.vue";
export default {
  name: "Menu",
  components: {
    Bg,
  },
  data() {
    return {
      // 搜索关键词
      keyword: "",
      // 切换
      activeKey: 0,

      // 商品类型
      productType: [],

      // 商品类型数据
      productdata: [],

      // 是否显示侧边栏
      isShow: true,
    };
  },
  created() {
    // 获取商品类型
    this.getProductType();
    // 查看商品类型数据
    this.getProductData("isHot", 1);
  },
  methods: {
    // 商品类型接口
    getProductType() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "get",
        url: this.baseUrl + "/type",
        params: {
          appkey: this.appkey,
        },
      })
        .then((result) => {
          console.log(result);
          this.$toast.clear();
          if (result.data.code === 400) {
            this.productType = result.data.result;
            console.log(this.productType);
          } else {
            this.$toast({
              message: " 拿不到!!!",
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log(err);
        });
    },

    // 查看类型商品
    getProductData(type, value) {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "get",
        url: this.baseUrl + "/typeProducts",
        params: {
          appkey: this.appkey,
          key: type,
          value: value,
        },
      })
        .then((result) => {
          console.log(result);
          this.$toast.clear();
          if (result.data.code === 500) {
            this.productdata = result.data.result;
            console.log(this.productdata);
          } else {
            this.$toast({
              message: " 拿不到!!!",
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log(err);
        });
    },

    // 选择类型
    changeTag(index) {
      console.log(index);
      this.productdata = [];
      let value = "";
      if (index === 0) {
        this.getProductData("isHot", 1);
      }
      this.productType.forEach((v) => {
        if (v.id === index) {
          value = v.type;
        }
      });
      console.log(value);
      this.getProductData("type", value);
    },

    // 点击商品跳转到详情
    goDetails(pid) {
      this.$router.push({ name: "Details", params: { pid } });
    },

    // 搜索
    onsearch(value) {
      if (value == "") {
        this.isShow = true;
        return;
      }
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "get",
        url: this.baseUrl + "/search",
        params: {
          appkey: this.appkey,
          name: value,
        },
      })
        .then((result) => {
          console.log(result);
          this.$toast.clear();
          if (result.data.code === "Q001") {
            if (result.data.result.length === 0) {
              this.$toast({
                message: "搜索不到你想要的！",
                forbidClick: true,
                duration: 3000,
              });
              return;
            }
            this.productdata = result.data.result;
            this.isShow = false;
            console.log(this.productdata);
          } else {
            this.$toast({
              message: " 拿不到!!!",
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log(err);
        });
    },

    // 取消搜索
    back() {
      this.isShow = true;
      this.getProductData("isHot", 1);
    },
  },
};
</script>